<template>
	<div class="cinema-list">
		<!-- :to="`/cinema/detail/${item.id}`" -->
		<router-link class="cinema-item" v-for="item in cinemas" :key="item.id" to="">
			<div class="cinema-title">
				<div class="c-title ellipsis">{{item.name}}</div>
				<div class="c-price">
					<span class="price">{{item.sellPrice}}</span>
					<div class="after">元起</div>
				</div>
			</div>
			<div class="cinema-address">
				<div class="c-addr ellipsis">{{item.addr}}</div>
				<div class="c-dist">{{item.distance}}</div>
			</div>
			<div class="cinema-labers">
				<div v-for="item in item.labels" :key="item.name" :style="{color: item.color, borderColor: item.color}">
					{{item.name}}
				</div>
			</div>
			<div class="cinema-discount">
				<div class="c-icon"></div>
				<div class="c-text">开卡特惠，首单1张票最高立减6元起</div>
			</div>
			<div class="cinema-showtime">
				<span>{{item.showTimes}}</span>
			</div>
			<!-- 分割线 -->
			<div class="cinema-line"></div>
		</router-link>
	</div>
</template>

<script>
	export default {
		props: {
			cinemas: {
				Object,
				Array
			}
		},
	}
</script>

<style lang="less" scoped>
	.cinema-list {
		.cinema-item {
			position: relative;
			padding: 13px 15px 13px 0;
			margin-left: 15px;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.ellipsis {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.cinema-title,
			.cinema-address {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.cinema-title {
				.c-title {
					flex: 1;
					height: 23px;
					line-height: 23px;
					font-size: 16px;
					color: #000;
				}

				.c-price {
					display: inline-block;
					padding-left: 3px;
					color: #f03d37;
					display: flex;
					align-items: baseline;

					.price {
						font-size: 18px;
					}

					.after {
						padding-left: 3px;
						font-size: 11px;
					}
				}
			}

			.cinema-address {
				margin-top: 6px;
				color: #666;

				.c-addr,
				.c-dist {
					font-size: 13px;
				}
			}

			.cinema-labers {
				display: flex;
				height: 17px;
				line-height: 17px;
				margin-top: 4px;
				margin-bottom: 4px;
				overflow: hidden;
				font-size: 0;
				-webkit-flex-shrink: 0;
				flex-shrink: 0;

				&>div {
					position: relative;
					display: inline-block;
					padding: 0 3px;
					height: 15px;
					line-height: 15px;
					border-radius: 2px;
					font-size: 12px;
					border: 1px solid #000;
					margin-right: 5px;
				}
			}

			.cinema-discount {
				color: #999;
				margin-bottom: 4px;
				display: flex;
				align-items: center;

				.c-icon {
					background: url(../assets/img/35bbf6fb5400971165865e8bb505f7d.png);
					background-size: 100%;
					width: 15px;
					height: 14px;
				}

				.c-text {
					margin-left: 5px;
					font-size: 11px;
				}
			}

			.cinema-showtime {
				padding: 0 15px 0 0;
				margin-right: -15px;
				line-height: 1.5;
				font-size: 0;

				&>span {
					display: inline-block;
					position: relative;
					font-size: 12px;
					color: #999;
				}
			}

			.cinema-line {
				&::after {
					content: " ";
					display: block;
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 1px;
					background-color: #e5e5e5;
					-webkit-transform: scaleY(.5);
					transform: scaleY(.5);
				}
			}
		}
	}
</style>
